<script lang='ts'>
import * as Cesium from 'cesium'
import { onMounted, defineComponent } from 'vue'
import axios from 'axios'
const baseUrl = import.meta.env.VITE_APP_BASE_URL
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJiZmExYjQzNC01NTM1LTRiYWItYjZmNy1kMjYxYzhkMWYwNWUiLCJpZCI6NTg1MTQsImlhdCI6MTYyMzIzMTUxM30.DSpD_74qNZ3v8C0DIhhemyusEpdg8gRip1G5ntL27Pw';

export default defineComponent({
  name: "Airplane",
  setup () {
    onMounted(async () => {
      const flightData = await axios.get(baseUrl + '/json/AirPlanePath.json', { headers: { ContextType: 'application/json' } }).then(data => {
        return data.data;
      })
      const timeStepInSeconds = 30;
      const totalSeconds = timeStepInSeconds * (flightData.length - 1);
      const start = Cesium.JulianDate.fromIso8601("2020-03-09T23:10:00Z");
      const stop = Cesium.JulianDate.addSeconds(start, totalSeconds, new Cesium.JulianDate());
      const viewer: Cesium.Viewer = new Cesium.Viewer('cesiumContainer', {
        terrainProvider: Cesium.createWorldTerrain()
      });
      const osmBuildings = viewer.scene.primitives.add(Cesium.createOsmBuildings());
      viewer.clock.startTime = start.clone();
      viewer.clock.stopTime = stop.clone();
      viewer.clock.currentTime = start.clone();
      viewer.timeline.zoomTo(start, stop);
      viewer.clock.multiplier = 50;
      viewer.clock.shouldAnimate = true;

      const positionProperty = new Cesium.SampledPositionProperty();

      for (let i = 0; i < flightData.length; i++) {
        const dataPoint = flightData[i];
        const time = Cesium.JulianDate.addSeconds(start, i * timeStepInSeconds, new Cesium.JulianDate());
        const position = Cesium.Cartesian3.fromDegrees(dataPoint.longitude, dataPoint.latitude, dataPoint.height);
        positionProperty.addSample(time, position);
        viewer.entities.add({
          description: `Location: (${dataPoint.longitude}, ${dataPoint.latitude}, ${dataPoint.height})`,
          position: position,
          point: { pixelSize: 10, color: Cesium.Color.RED }
        });
      }

      async function loadModel () {
        // Load the glTF model from Cesium ion.
        // const airplaneUri = await Cesium.IonResource.fromAssetId(812605);
        const airplaneUri = baseUrl + '/models/Cesium_Air.glb';
        const airplaneEntity = viewer.entities.add({
          availability: new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({ start: start, stop: stop })]),
          position: positionProperty,
          // Attach the 3D model instead of the green point.
          model: { uri: airplaneUri },
          // Automatically compute the orientation from the position.
          orientation: new Cesium.VelocityOrientationProperty(positionProperty),
          path: new Cesium.PathGraphics({ width: 3 })
        });

        viewer.trackedEntity = airplaneEntity;
      }

      loadModel();
    })
  }
})
</script>
<template>
  <div id="cesiumContainer"></div>
</template>
<style scoped lang="scss">
#cesiumContainer {
  width: 100%;
  height: 100%;
}
</style>